<template>
	<view class="container">
		<u-navbar :is-back="true" title="学习" back-icon-color='#333333' height="50" :border-bottom="false">
		</u-navbar>
		<view class="details" v-for="(item,index) in gallery_list" :key="index">
			<view class="">
				<text>{{item.main_title}}</text>
				<text>{{item.startTime}}</text>
			</view>
			<view class="photoList">
				<image :src="i.img" mode="widthFix" v-for="(i,j) in item.picture_list" :key="j"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../request.js'
	import time from '../../time.js'
	export default {
		data() {
			return {
				id: '',
				galleryList: [],
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
			}
			this.getGalleryList();
		},
		computed: {
			gallery_list() {
				if (this.galleryList) {
					this.galleryList.forEach(item => {
						this.$set(item, 'startTime', time.format(item.create_time));
					})
					return this.galleryList;
				} else {
					return [];
				}
			}
		},
		methods: {
			getGalleryList() {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				let _this = this;
				request({
					url: base_url + 'teacher/gallery/galleryList',
					method: 'post',
					data: {
						gallery_type_id: this.id ? this.id : 1,

					},
					success(res) {
						if (res.statusCode == 200) {
							console.log(res.data.data.data);
							_this.galleryList = res.data.data.data;
						} else {
							_this.$refs.uToast.show({
								title: res.data.message || '系统错误',
								type: 'warning',
							})
						}

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		background: #F2F2F2;

		.details {
			width: 100%;
			background: #fff;

			view {
				&:nth-child(1) {
					width: 100%;
					height: 90rpx;
					display: flex;
					justify-content: flex-start;
					margin-top: 20rpx;

					text {
						&:nth-child(1) {
							font-size: 30rpx;
							text-indent: 1em;
							color: #333333;
							margin-top: 30rpx;
							width: 510rpx;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
							margin-top: 40rpx;
						}
					}
				}
			}

			.photoList {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				image {
					width: 213rpx;

					&:nth-child(1) {
						margin-left: 20rpx;
					}

					&:nth-child(n+1) {
						margin-left: 20rpx;
					}
				}
			}

		}
	}
</style>
